import { useEffect, useState } from "react"
import type { Issue } from "../api/type/issueType"
import { useParams } from "react-router"
import { useSelector } from "react-redux"
import type { ROOTSTATE } from "../Store"
import { reqGetIssueById } from "../api/issueApi"
import { Avatar, Button, Empty, Flex, Pagination } from "antd"
import { Title } from "../components/Content/title"
import type { Comment } from "../api/type/commentType"
import { reqAddComment, reqGetCommentByIdsByPage } from "../api/commentApi"
import { CommentItem } from "../components/commentItem"


export const IssueDetail = ()=>{
    const [nowIssue,setNowIssue] = useState<Issue>()
    const params = useParams()
    const [commentList,setCommentList] = useState<Comment[]>([])
    const { isLogin,user } = useSelector((state:ROOTSTATE) => state.userStore)
    const [nowP,setNowP] = useState(1)
    const size = 5;
    const [total,setTotal] = useState(0)
    const getIssue = async ()=>{
        const { data } = await reqGetIssueById(params.id!)
        setNowIssue(data)
    
    }
    const getComments = async ()=>{
        const res = await reqGetCommentByIdsByPage(params.id!,nowP,5);
        setCommentList(res.data.list)
        setTotal(res.data.total)
    }
    const [value,setValue] = useState("")
    const sendComment = async()=>{
        await reqAddComment({
            content:value,
            userId:user._id!,
            ids:params.id!
        })
        setValue("")
        getComments()
    }
    useEffect(()=>{
        getComments()
    },[nowP])

    useEffect(()=>{
        getIssue()
    },[])
    return (
        <Flex vertical gap={30}>
            <Title title="问题详情"></Title>
            <Flex vertical gap={20}>
                <Flex gap={20}>
                    <Avatar size={64} src={nowIssue?.user.avatar}></Avatar>
                    <Flex vertical flex={1} justify="space-between">
                        <div>{nowIssue?.user.nickname}</div>
                        <Flex gap={20}>
                            <Button size="small" color={nowIssue?.type.color} variant="solid">
                                {nowIssue?.type.typename}
                            </Button>
                            <div>发布于:{new Date(nowIssue?.createdAt!).toLocaleDateString()}</div>
                        </Flex>
                    </Flex>
                </Flex>
                <h1>标题:{nowIssue?.title}</h1>
                <div>问题详情:</div>
                <div dangerouslySetInnerHTML={{__html:nowIssue?.content || "" }}
                style={{border: "2px solid skyblue",borderRadius:8}}></div>
                <Flex>
                    {isLogin ? (
                        <Flex gap={20} flex={1}>
                            <Flex vertical gap={10}>
                                <Avatar src={user.avatar} size={64}></Avatar>
                                <Button onClick={sendComment}>发布评论</Button>
                            </Flex>
                            <textarea value={value} onChange={(e)=>setValue(e.target.value)}
                                placeholder="输入评论: " style={{flexGrow:1,resize:"none",height:100}}>

                            </textarea>
                        </Flex>
                    ) : (
                        <div>登陆后再评论</div>
                    )}
                </Flex>
                <Flex vertical gap={20}>
                    {commentList.length > 0 ? (
                        <>
                            {commentList.map((item)=>{
                                <CommentItem {...item} key={item._id}></CommentItem>
                            })}
                            <Pagination 
                                current={nowP}
                                pageSize={size}
                                total={total}
                                onChange={(e)=>{
                                    setNowP(e)
                                }}    
                            >

                            </Pagination>
                        </>
                    ):(
                        <Empty description="暂无评论"></Empty>
                    )}
                </Flex>
            </Flex>

        </Flex>
    )
}   